

<template>
    <div>
        <!-- <RouterLink to="/home">
            登录
        </RouterLink> -->

        <div class="text-center paddingTop50">
            <div class="paddingCol5">doneTodosCount: {{ doneTodosCount }}</div>
            <div class="paddingCol5">getTodoById(1): {{ JSON.stringify(getTodoById(1)) }}</div>
            <div class="paddingCol5">getTodoById(100): {{ JSON.stringify(getTodoById(100)) }}</div>
            <div class="paddingCol5">vueGetterB: {{ JSON.stringify(vueGetterB) }}</div>
            
        </div>

        


        <div class="rowCenter paddingTop100">
            <el-button type="info" @click="fn.eSuccess('xxxx操作已成功')">成功</el-button>
            <el-button type="info" @click="fn.eError('xxxx操作已成功')">错误</el-button>
            <el-button type="info" @click="fn.eInfo('xxxx操作已成功')">消息</el-button>
            <el-button type="info" @click="fn.eWarning('xxxx操作已成功')">警告</el-button>
        </div>
        <div class="rowCenter paddingTop20">
            <el-button type="primary" @click="clickSubmit">测试开始 - console.log</el-button>
        </div>

        <div class="rowCenter paddingTop20">
            <el-button type="success" plain round @click="fn.back()">返回</el-button>
        </div>

    </div>
</template>



<script>
import { mapGetters } from 'vuex'
export default {
    data () {
        return {

        }
    },
    computed: {
        // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
            'doneTodosCount',
            'getTodoById'
        ]),

        // 可以多次map
        ...mapGetters({
            vueGetterB: 'getterNameA'
        })
    },
    methods: {
        async clickSubmit () {
            this.fn.clog('clickSubmit()')

            // 直接修改state
            this.$store.state.user.token = '123'
            // 直接获取state
            this.fn.clog('token: ', this.$store.state.user.token)
            
            // 通过getters获取state - 不用()结尾
            this.fn.clog('token: ', this.$store.getters.getToken)
            this.fn.clog('uInfo: ', this.$store.getters.getUInfo)

            // 通过actions获取state
            this.fn.clog('TestName: ', await this.$store.dispatch('getTestNameActions'))

            // computed可以直接用
            this.fn.clog('computed vueGetterB: ', this.vueGetterB)
            this.fn.clog('computed doneTodosCount: ', this.doneTodosCount)


            // 使用Mutations修改state
            this.fn.clog('TestName: 原来 ', this.$store.state.test.testName)
            this.$store.commit('updateTestNameMutations', 'abc-by-mutations')
            this.fn.clog('TestName: Mutations修改后 ', this.$store.state.test.testName)
            this.fn.clogWarn('TestName: Mutations修改后 ', await this.$store.dispatch('getTestNameActions'))

            // 通过actions修改state
            this.$store.dispatch('updateTestNameActions','abc-by-actions')
            this.fn.clogWarn('TestName: Actions修改后', await this.$store.dispatch('getTestNameActions'))

            // 异步actions
            this.fn.clog('异步前')
            let resYibu = await this.$store.dispatch('yibu', (new Date()).getTime())
            this.fn.clog('异步后')
            this.fn.clogWarn(resYibu)

            // this.fn.go('/home')
        }
    },
    mounted () {
        this.fn.clog('[Page] test')
    }
}
</script>